import IndivduationDiaIcon from '@/pages/ApplicationEditPage/components/IndivduationDIaIcon'
import { INPUT_CONSTRAINTS } from '@/pages/workflow/components/InspectData'
import { useWorkFlowStore } from '@/store/workflowStore'
import { Divider, Popover, Select, Slider, Tooltip } from 'antd'
import { useEffect, useState } from 'react'
import '../index.less'

/* 意图识别-模型 */
export default function IntentModeCont({ info, editData }) {
  const { modelOptions } = useWorkFlowStore()
  const [model, setModal] = useState(info?.model?.name || '')
  const [showErrorInfo, setShowErrorInfo] = useState(false)
  const handleChange = (value: string) => {
    setModal(value)
    editData({
      model: {
        ...info.model,
        name: value
      }
    })
  }

  /* Slider值 */
  const [temperature, setTemperature] = useState(info?.model?.completion_params?.ResponseNum || 5)

  const SliderNumChange = newValue => {
    setTemperature(newValue as number)
    editData({
      model: {
        ...info.model,
        // completion_params: { temperature: newValue }
        completion_params: { ResponseNum: newValue }
      }
    })
  }

  useEffect(() => {
    setTemperature(info?.model?.completion_params?.ResponseNum || 5)
    setModal(info?.model?.name || '')
    setTimeout(() => {
      setShowErrorInfo(true)
    }, 100)
  }, [info])

  /* 弹窗 */
  const content = (
    <div className="limSettingCase semi-popover-wrapper semi-popover-wrapper-show w-[660px] rounded-md">
      <div className="flex flex-col gap-[16px] p-[12px]">
        <span className="flex-1 text-[18px] font-semibold">模型</span>
        <Divider style={{ margin: '0', padding: '0' }} />
        {/* 最大回复长度 */}
        <span className="flex flex-1 items-center font-semibold">输入及输出设置</span>
        <div className="flexRowStart">
          <div className="flex w-[162px] items-center font-normal ">
            最大回复长度
            <Tooltip
              placement="top"
              title={'控制模型输出的 Tokens 长度上限。通常 100 Tokens 约等于 150 个中文汉字。'}
              arrow
            >
              <div className="cursonCase lim_iconCase">
                <IndivduationDiaIcon />
              </div>
            </Tooltip>
          </div>
          <Slider
            onChange={SliderNumChange}
            styles={{
              track: {
                background: 'transparent'
              },
              tracks: {
                background: `linear-gradient(to right, rgba(77, 83, 232,1) 0%, rgba(77, 83, 232,1) 100%)`
              }
            }}
            value={temperature}
            max={INPUT_CONSTRAINTS.INTENT_RECOVER_MAX_CONT}
            min={INPUT_CONSTRAINTS.INTENT_RECOVER_MIN_CONT}
            step={1}
            style={{ width: '330px' }}
          />
          <span style={{ marginLeft: '10px' }}>{temperature}</span>
        </div>
      </div>
    </div>
  )
  return (
    <>
      <div className="flexRow flexRowJustBet limModeCont">
        {/* Select */}
        <Select
          style={{ width: '92%' }}
          value={model}
          onChange={handleChange}
          placeholder="模型"
          options={modelOptions}
          fieldNames={{ label: 'model_name', value: 'id' }}
        />
        {/* Popover 弹窗 */}
        <Popover content={content} placement="left" trigger="click">
          <div className="limModeCont_svgBut cursonCase flexRow">
            <svg
              className="cursonCase"
              width="1em"
              height="1em"
              viewBox="0 0 24 24"
              fill="currentColor"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M9.42511 6.60143C9.95473 6.42489 9.95473 5.67576 9.42511 5.49922L8.48372 5.18542C7.78986 4.95413 7.24539 4.40967 7.0141 3.71581L6.70031 2.77441C6.52377 2.24479 5.77464 2.24479 5.5981 2.77441L5.2843 3.71581C5.05301 4.40966 4.50854 4.95413 3.81469 5.18542L2.87329 5.49922C2.34367 5.67576 2.34367 6.42489 2.87329 6.60143L3.81469 6.91523C4.50854 7.14651 5.05301 7.69098 5.2843 8.38484L5.5981 9.32624C5.77464 9.85585 6.52377 9.85585 6.7003 9.32624L7.0141 8.38484C7.24539 7.69098 7.78986 7.14651 8.48371 6.91523L9.42511 6.60143zM2.46619 18.0378C2.46619 17.6696 2.76466 17.3711 3.13285 17.3711H16.0495C16.4177 17.3711 16.7162 17.6696 16.7162 18.0378V18.9544C16.7162 19.3226 16.4177 19.6211 16.0495 19.6211H3.13285C2.76466 19.6211 2.46619 19.3226 2.46619 18.9544V18.0378zM22.1004 18.1749C22.4091 18.2778 22.4091 18.7144 22.1004 18.8173L21.5517 19.0002C21.1473 19.135 20.8299 19.4524 20.6951 19.8568L20.5122 20.4056C20.4093 20.7143 19.9727 20.7143 19.8698 20.4056L19.6868 19.8568C19.552 19.4524 19.2347 19.135 18.8302 19.0002L18.2815 18.8173C17.9728 18.7144 17.9728 18.2778 18.2815 18.1749L18.8302 17.992C19.2347 17.8571 19.552 17.5398 19.6868 17.1354L19.8698 16.5866C19.9727 16.2779 20.4093 16.2779 20.5122 16.5866L20.6951 17.1354C20.8299 17.5398 21.1473 17.8571 21.5517 17.992L22.1004 18.1749zM2.46619 12.0378C2.46619 11.6696 2.76466 11.3711 3.13285 11.3711H20.5495C20.9177 11.3711 21.2162 11.6696 21.2162 12.0378V12.9544C21.2162 13.3226 20.9177 13.6211 20.5495 13.6211H3.13285C2.76466 13.6211 2.46619 13.3226 2.46619 12.9544V12.0378zM12.8829 5.37109C12.5147 5.37109 12.2162 5.66957 12.2162 6.03776V6.95443C12.2162 7.32262 12.5147 7.62109 12.8829 7.62109H20.5495C20.9177 7.62109 21.2162 7.32262 21.2162 6.95443V6.03776C21.2162 5.66957 20.9177 5.37109 20.5495 5.37109H12.8829z"></path>
            </svg>
          </div>
        </Popover>
      </div>
      {showErrorInfo && !model && <span className="custom-params-invalid">模型不可为空</span>}
    </>
  )
}
